@function rem($px) {
  @return $px / 50 + rem
}

.clearfix:after {
  display: block;
  clear: both;
  content: " ";
}

html, body, .box {
  width: 100%;
  overflow: hidden;
}

header {
  height: rem(100);
  width: 100vw;
  background: url("../img/bg_02.png") repeat-x bottom;
  //background-size: ;
  position: relative;
  left: 0;
  top: 0;
  .header_title {
    width: 100vw;
    height: rem(100);
    background: url("../img/shop_05.png") no-repeat center;
    #fh {
      margin-top: rem(30);
      margin-left: rem(20);
    }
  }
}

.box {
  height: 93vh;
  overflow: auto;
  //background: greenyellow;

  .banner {
    width: 100vw;
    overflow: hidden;
    .swiper-container {
      width: 100vw;
      //padding-bottom: rem(50);
      img {
        width: 100%;
      }
      .swiper-pagination {
        position: relative;
        bottom: rem(10);
        span {
          width: rem(15);
          height: rem(15);
        }
        .swiper-pagination-bullet-active {
          background: #ff6700;
        }
      }
    }
  }

  .nav {
    margin-bottom: rem(30);
    ul {
      li {
        width: 25vw;
        float: left;
        text-align: center;
        img {
          width: rem(80);
          height: rem(80);
          display: block;
          margin: rem(20) auto;
        }
        p {
          font-size: rem(22);
          color: #999999;
          line-height: 2;
        }
      }
    }
  }

  .shop {
    padding: rem(10);
    .shop_title {
      //width: 100%;
      padding: rem(15) 0;
      border-bottom: 2px solid #dcdcdc;
      span {
        font-size: rem(28);
        font-weight: 700;
      }
      span:nth-child(1) {
        padding-left: rem(10);
        border-left: 2px solid #d51938;
        float: left;
      }
      span:nth-child(2) {
        float: right;
        padding-right: rem(10);
      }
    }

    .shop_body {
      padding-top: rem(30);
      ul {
        li {
          margin-bottom: rem(30);
          div {
            float: left;
          }
          .shop_body_left {
            background: #f4f4f4;
            width: 100%;
            .num {
              background: #e00202;
              float: left;
              width: rem(60);
              height: rem(120);
              text-align: center;
              line-height: rem(120);
              color: white;
              font-size: rem(40);
              font-weight: 800;
            }
            img {
              display: block;
              float: left;
              height: rem(120);
            }
            .shop_li_title {
              margin-left: rem(30);
              float: left;
              font-size: rem(26);
              color: #999999;
              border-bottom: 0;
              line-height: 1.5;
              padding-top: .4rem;
              span {
                font-size: rem(24);
                font-weight: 500;
              }
              b {
                color: #c7223d;
              }
            }
            .money {
              float: right;
              color: #d51938;
              line-height: rem(120);
              .fan {
                font-size: rem(50);
                font-weight: 800;
                color: #999999;
                line-height: rem(120);
              }
            }
          }

        }
      }
    }

    .more {
      height: rem(80);
      background: #f5f5f5;
      color: #666666;
      font-size: rem(28);
      text-align: center;
      line-height: rem(80);
      font-weight: 800;
    }

    .live {
      width: 100%;
      margin-top: rem(50);
      margin-bottom: rem(50);
      .live_left {
        height: rem(352);
        width: 25%;
        float: left;
        p {
          color: white;
          font-size: rem(35);
          font-weight: 800;
          line-height: 3;
          text-align: center;
        }
      }
      .live_right {
        float: left;
        width: 74.8%;
        border-top: 1px solid lightgray;
        border-right: 1px solid lightgray;
        ul {
          li {
            width: 33%;
            height: rem(87);
            float: left;
            border: 1px solid lightgray;
            border-top: 0;
            border-right: 0px;
            text-align: center;
            line-height: rem(87);
            font-size: rem(25);
            color: #999999;
          }
        }
      }
    }

    .iphone {
      width: 100%;
      margin-top: rem(50);
      ul {
        li {
          width: 33%;
          float: left;
          img {
            display: block;
            width: rem(40);
            margin: rem(20) auto rem(10);
          }
          p {
            color: white;
            font-size: rem(24);
            text-align: center;
            line-height: 3;
          }
        }
        li:nth-child(1) {
          background: #38a4f1;
        }
        li:nth-child(2) {
          background: #8bca11;
        }
        li:nth-child(3) {
          background: #ff7404;
        }
      }
    }
  }
  /*  .shop:nth-child(3) {
      .live_left {
        background: orangered;
      }
    }
    .shop:nth-child(6) {
      .live_left {
        background: greenyellow;
      }
    }*/

  .login {
    background: #f8f8f8;
    margin-top: rem(20);
    li {
      font-size: rem(30);
      line-height: rem(85);
      padding: 0 rem(20);
      font-weight: 800;
      float: left;
      a {
        color: #303030;
        text-decoration: none;
      }
      .top {
        font-size: rem(20);
        color: #303030;
      }
    }
    li:last-child {
      float: right;
    }
  }

  .footer {
    background: #eeeeee;
    text-align: center;
    line-height: 2.5;
    span {
      font-size: rem(28);
      color: #303030;
      padding: 0 rem(10);
    }
    p {
      font-size: rem(20);
      color: #B0B0B0;
    }
  }
}

.live:nth-child(4) {
  .live_left {
    background: url("../img/ju_76.png") no-repeat left bottom #ff3900;
  }
}
.live:nth-child(6) {
  .live_left {
    background: url("../img/ju_81.png") no-repeat left bottom #8bca11;
  }
}

.live:nth-child(8) {
  .live_left {
    background: url("../img/ju_89.png") no-repeat left bottom #838383;
  }
}


footer {
  width: 100vw;
  height: rem(100);
  background: red;
  position: fixed;
  bottom: 0;
}